<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>车主授权</title>
    <script src="js/vue.min.js"></script>
    <script src="js/vant.min.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
</head>

<body>
<div id="app" v-cloak>
    <div class="content">
        <div class="container">
            <img src="./img/logo.png" class="topPic"
                 style="">

            <div class="cancel" @click="">
                <!--                <van-icon name="arrow-left" color="#000" size="26px"/>-->
            </div>
            <div class="greetings">
                <div class="cg-title">车主授权</div>
                <div class="cg-subtitle"></div>
            </div>
            <div class="innerContent">
                <div class="c-content">
                    <van-field
                            type="tel"
                            class="input"
                            placeholder="请输入姓名"
                            v-model="name"
                    >
                        <template #button>
                            <van-icon
                                    v-show="name"
                                    @click="clearPhoneNum"
                                    color="#999"
                                    name="clear"
                            />
                        </template>
                    </van-field>
                    <van-field
                            type="tel"
                            class="input"
                            placeholder="请输入身份证号"
                            v-model="idcard"
                            maxlength="18"
                    >
                        <template #button>
                            <van-icon
                                    v-show="idcard"
                                    @click="clearIdcard"
                                    color="#999"
                                    name="clear"
                            />
                        </template>
                    </van-field>
                    <van-field
                            class="input"
                            placeholder="请输入验证码"
                            v-model="verificationCode"
                    >
                        <template #button>
                            <div class="vcode" @click="getVcode">
                                图形验证码占位
                            </div>
                        </template>
                    </van-field>
                    <van-uploader :readOnly="!isUpload" :max-count="1" upload-text="请点击此处选择并上传您的行驶证" v-model="fileList"
                                  @click-upload="upload" style="width: 100%"/>


                    <!--                    <van-checkbox v-model="agreement" class="with-click">-->
                    <!--                        <div class="hand">我已阅读</div>-->
                    <!--                        <span style="color: #428ceb" @click="showPopup('myPopup')">-->
                    <!--            《车信盟平台注册协议》-->
                    <!--          </span>-->
                    <!--                    </van-checkbox>-->
                </div>
                <div class="btn">
                    <div class="b-btn" @click="login">授 权</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="foot">
                <div class="cross-line"></div>
                <div class="foot-container">
                    <div class="f-one">诚信与您随行</div>
                    <div class="f-two">车信盟服务热线：4008203152</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                name: '', //手机号码
                idcard: '', //身份证号码
                verificationCode: '', //验证码
                agreement: false,
                placeholder: '请输入手机号码',
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                fileList: [],
                phoneNumberChange: false,
                idcardChange: false,
                isUpload: false,
            }
        },
        mounted() {

        },
        computed: {
            listenChange() {
                const {name, idcard} = this
                return {name, idcard}
            },
        },
        methods: {
            clearPhoneNum() {
                this.name = ''
            },
            clearIdcard() {
                this.idcard = ''
            },
            // 获取验证码
            getVcode(e) {

            },
            login() {
                this.upload()
                if (this.isUpload == true) {
                    // 跳转到授权书，使用原生跳转
                    window.location.href = './commitment.html'
                }
            },
            upload() {
                if (this.isUpload == false) {
                    vant.Toast('请填写手机号和身份证号！');
                }
            },
        },
        watch: {
            listenChange: {
                handler: function (val, oldVal) {
                    if (val.phoneNumber && val.idcard) {
                        this.isUpload = true
                    } else {
                        this.isUpload = false
                    }
                },
                deep: true,
            },
        },
    });
</script>

<style>
    [v-cloak] {
        display: none;
    }

    body {
        margin: 0px;
        padding: 0px;
    }

    .content {
        position: relative;
        background: #F9F9F9;
        width: 100%;
        height: 100vh;
    }

    .container {
        background: #fff;
        position: absolute;
        width: 100%;
    }

    .topPic {
        position: absolute;
        width: 120px;
        right: 30px;
        top: 20px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }

    /* height 100% */
    .cancel {
        padding: 37.5px 30px 0 30px;
        display: inline-block;
    }

    .greetings {
        height: 120px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        line-height: 30px;
        padding: 0 30px;
    }

    .cg-title {
        font-size: 29px;
        font-weight: bold;
        color: #2b2b2b;
    }

    .cg-subtitle {
        font-size: 16px;
        color: #2b2b2b;
        margin-left: 3px;
    }

    .innerContent {
        background: #F9F9F9;
        height: calc(100% - 120px);
    }

    .c-content {
        padding: 15px 30px;
    }

    .input {
        margin: 25px 0;
        background: #f9f9f9;
        border-bottom: 1px solid #ececec;
    }

    .with-click {
        font-size: 12.5px;
        padding: 0;
    }

    .hand {
        display: inline-block;
    }

    .vcode {
        font-size: 15px;
        color: #1a63c1;
    }


    .btn {
        text-align: center;
    }

    .b-btn {
        background-image: linear-gradient(to right, #488ee9, #1c69d3);
        line-height: 40px;
        margin: 7.5px 30px 0 30px;
        border-radius: 9px;
        font-size: 15px;
        color: #ffffff;
    }

    .b-other {
        font-size: 15px;
        line-height: 30px;
    }

    span:first-child {
        color: #929292;
    }

    span:last-child {
        color: #2b2b2b;
    }

    .footer {
        position: absolute;
        bottom: 1.852vh;
        left: 0;
        right: 0;
        text-align: center;
        height: 60px;
        z-index: 10;
    }

    .foot {
        position: relative;
        padding: 7.5px 0;
    }

    .foot-container {
        position: relative;
        line-height: 22.5px;
    }

    .f-one {
        background: #F9F9F9;
        font-size: 15px;
        color: #929290;
        margin: 0 150px;
    }

    .f-two {
        font-size: 12px;
        color: #C6C6C6;
    }

    .cross-line {
        position: absolute;
        top: 18px;
        left: 0;
        right: 0;
        height: 1px;
        background: #e9e9e8;
        margin: 0 45px;
        /* margin-bottom -0.8rem */
    }

    .van-checkbox__icon .van-icon {
        transform: scale(0.7);
    }

    .van-checkbox__icon--checked .van-icon {
        background-color: #558ae2;
        border-color: #558ae2;
    }

    .van-uploader__upload {
        width: 100vw;
        height: 120px;
        margin-left: 10px;
        border: 2px dashed #DCDEE0;
        border-radius: 10px;
    }

    .van-uploader__preview-image {
        width: 86vw;
        height: 120px;
        border-radius: 10px;
    }

    .van-uploader__preview-delete {
        background-color: rgba(0, 0, 0, 0);
    }

    .van-uploader__preview-delete-icon {
        font-size: 32px;
    }
</style>

</body>
</html>


